import App from './App.vue';
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from '@/router/index';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

/*  ***************************样式***************************  */
import './style.css';
import './assets/iconfont.js';
import './assets/weatherIcon.js';
import 'tailwindcss/tailwind.css';
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import "vue-data-ui/style.css";

/* ***************************路由权限*************************** */
import '@router/permission';

/* ***************************element*************************** */
// element使用 Day.js 库来管理组件的日期和时间，必须在 Day.js 中设置一个适当的区域，以便使国际化充分发挥作用。
import 'dayjs/locale/zh-cn';
// 基于断点适配
import 'element-plus/theme-chalk/display.css';
// element 内置过度动画
import 'element-plus/theme-chalk/base.css';

/* ***************************自定义指令*************************** */
import directive from '@utils/directive';

/* ***************************全局事件总线*************************** */
// mitt
import mitt from 'mitt';

// 创建vue实例
const app = createApp(App);

// 插件实例
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

// 挂载插件
app.use(pinia);
app.use(router);
app.use(ElMessage);

// 自定义指令
directive(app);

// 全局事件总线
const Mit = mitt();
// 用于扩充组件实例类型以支持自定义全局属性。
declare module 'vue' {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit;
    }
}
// 注册全局属性
app.config.globalProperties.$Bus = Mit;

// 挂载vue实例
app.mount('#app');
